<template>
  <div class="book">
    <!-- logo -->
    <h1 class="logo"></h1>
    <!-- 登录 -->
    <h3>登录</h3>
    <!-- 表单 -->
    <form class="form">
      <!-- 用户名 -->
      <label>
        名字：<input type="text" name="username" v-model="logPrams.username" />
      </label>
      <!-- 密码 -->
      <label>
        密码：<input type="password" name="password" v-model="logPrams.password" />
      </label>
      <div class="tip" v-show="1">
        {{ err }}
      </div>
    </form>
    <!-- 底部 -->
    <div class="other">
      <!-- <div class="forget" @click="changePage(3)">
        忘记密码？
      </div> -->
      <div class="reg">
        还没有账号？<span @click="changePage(2)">立即注册</span>
      </div>
    </div>
    <!-- 登录按钮 -->
    <div class="login" @click="login">登录</div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import userStore from '@/stores/modules/user';
import { useRouter } from 'vue-router';
import { useRoute } from 'vue-router';

//获取路由器
let $router = useRouter()
//路由对象
let $route = useRoute()
// 登录参数
const logPrams = reactive({
  username: '',
  password: ''
})
// 错误信息
let err = ref('')

const emit = defineEmits(['updatePage'])
// 切换页面
const changePage = (page) => {
  emit('updatePage', page);
}

// 登录
const login = async () => {
  if (!logPrams.username || !logPrams.password) {
    err.value = '名字或密码不能为空'
    return
  }
  try {
    await userStore().userLogin(logPrams)
    $router.push({ path: '/home' })
  } catch (error) {
    err.value = error.message
    console.dir(err.value);
  }
}

</script>

<style lang="scss" scoped>
.book {
  box-shadow: .0667rem .0667rem .0667rem rgba(0, 0, 0, 0.25);
  background-color: #B0A272;
  border-radius: .0333rem .1667rem .1667rem .0333rem;
  width: 8.1667rem;
  height: 10rem;

  // logo
  .logo {
    float: left;
    background: url('@/assets/logo.png') no-repeat;
    background-size: contain;
    margin: .5rem .5rem 0;
    width: 3.3333rem;
    height: 1.6667rem;
  }

  // 登录
  h3 {
    margin-top: 2.7333rem;
    font-size: .6rem;
    text-align: center;
  }

  // 表单
  .form {
    display: flex;
    flex-direction: column;
    align-items: center;

    // 表单项
    label {
      display: block;
      margin-top: .6667rem;
      font-size: .6rem;

      input {
        background: none;
        border: none;
        border-bottom: #000 .0167rem solid;
        width: 3.3333rem;
      }
    }

    .tip {
      margin: .5rem auto 0;
      font-size: .3333rem;
      font-weight: bold;
      color: #DC143C;
    }
  }

  // 底部
  .other {
    display: flex;
    justify-content: space-around;
    margin-top: .5rem;
    font-size: .3333rem;

    .forget {
      font-weight: bold;
      color: rgba(101, 67, 33, 1);
      cursor: pointer;
    }

    // 立即注册
    span {
      font-weight: bold;
      color: rgba(101, 67, 33, 1);
      cursor: pointer;
    }
  }

  // 登录按钮
  .login {
    background: rgba(247, 188, 111, 1);
    margin: .5rem auto 0;
    border-radius: .1667rem;
    width: 3.3333rem;
    height: .8333rem;
    font-size: .6rem;
    text-align: center;
    line-height: .8333rem;
    cursor: pointer;
  }
}
</style>